<template>
	<view class="uiwu-button">
		<!-- <view class="uiwu-button-num">编号：{{dataInfo.device_info?.device_code}}</view> -->
		<view class="uiwu-flex-space">
			<view class="left uiwu-flex-column" @click="showDetail">
				<image :src="dataInfo.product_info?.image" mode="aspectFill"></image>
				<text>{{uiwu.lang('可兑积分')}}：{{dataInfo.product_info?.give_integral}}</text>
			</view>
			<view class="start" v-if="dataInfo.device_info?.state == 0 && dataInfo?.subscribe_num == 0 && !is_blocked"
				@tap="TapStart(dataInfo)">
				<text>{{uiwu.lang('开始游戏')}}</text>
				<text>{{dataInfo.product_info?.gold}}{{uiwu.lang('币/次')}}</text>
			</view>
			<view class="start" v-if="dataInfo.device_info?.state == 0 && dataInfo?.subscribe_num == 0 && is_blocked"
				@tap="videoInit">
				<text>{{uiwu.lang('加载画面')}}</text>
				<text>{{uiwu.lang('需要手动加载画面')}}</text>
			</view>
			<view v-if="dataInfo.device_info?.state == 1" class="start" @tap="TapReservation(dataInfo)">
				<text v-if="!isReservation">{{uiwu.lang('排队')}}</text>
				<text v-else>{{uiwu.lang('取消排队')}}</text>
				<text
					style="white-space: nowrap;">{{dataInfo.product_info?.gold}}{{uiwu.lang('币/次')}}（{{uiwu.lang('前面')}}{{dataInfo.subscribe_num}}{{uiwu.lang('人排队')}}）</text>
			</view>
			<view class="right uiwu-flex-column">
				<view class="image uiwu-flex-center">
					<image src="/static/dabi.png" mode="widthFix"></image>
				</view>
				<text>{{uiwu.lang('金币')}}：{{dataInfo.now_money}}</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { uiwu } from '@/config/config';
	import { startGren, grabSubscribe, cancel_subscribe } from '@/api/api';
	import { ref } from 'vue';
	defineProps({
		dataInfo: {
			default: {},
			type: Object
		},
		monitor_code: {
			default: null,
			type: String
		},
		is_blocked: { // 是否被浏览器阻止
			default: false,
			type: Boolean
		}
	})
	const isStart = ref(true)
	const emits = defineEmits(['onStart', 'changeUpdate', 'moneyBuZu', 'showDetail', 'videoInit'])
	const isReservation = ref(false)
	const TapStart = async ({ device_info }) : Promise<any> => {
		if (!isStart.value) return //防止重复点击
		isStart.value = false
		const result = await startGren({
			device_id: device_info.id,
			room_id: 0
		})
		isStart.value = true
		if (!result) return
		if (result.data.room_id == 'now_money_lack') {
			emits('moneyBuZu')
			return
		}
		emits('onStart', result.data.room_id)
		// emits('onStart', 1)
	}
	const TapReservation = async ({ device_info }) : void => {
		const result = isReservation.value ? await cancel_subscribe({ device_id: device_info.id }) : await grabSubscribe({ device_id: device_info.id })
		if (!result) return
		uiwu.toast(isReservation.value ? uiwu.lang('取消成功') : uiwu.lang('预约成功'))
		isReservation.value = !isReservation.value
		emits('changeUpdate')
	}
	const setisReservation = async () => {
		isReservation.value = false
		await cancel_subscribe({ device_id: device_info.id })
	}
	const getisReservation = () => {
		return isReservation.value
	}
	const showDetail = () => {
		emits('toShowDetail')
	}
	const videoInit = () => {
		emits('videoInit')
	}
	defineExpose({
		setisReservation,
		getisReservation,
	})
</script>

<style lang="scss">
	.uiwu-button {
		padding: 0 45rpx;

		.uiwu-button-num {
			font-size: 18rpx;
			font-weight: 500;
			color: #FCE5C7;
			text-align: center;
			margin-bottom: 24rpx;
			padding-top: 2rpx;
		}

		.left {
			width: 168rpx;
			height: 200rpx;
			background: #000;
			border-radius: 20rpx;
			padding: 3rpx;
			image {
				width: 100%;
				height: 168rpx;
				border-radius: 20rpx;
			}

			text {
				font-size: 20rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				line-height: 32rpx;
				white-space: nowrap;
			}
		}

		.right {
			width: 168rpx;
			height: 200rpx;
			background: #000;
			border-radius: 20rpx;
			padding: 3rpx;
			.image {
				width: 100%;
				height: 168rpx;
				border-radius: 20rpx;
				background-color: #fff;
				image {
					width: 96rpx;
				}
			}

			text {
				font-size: 20rpx;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				line-height: 32rpx;
				white-space: nowrap;
			}
		}

		.start {
			width: 256rpx;
			height: 129rpx;
			background: url('../../static/start.png') no-repeat 0 0;
			background-size: 100% 100%;
			text-align: center;
			line-height: 90rpx;
			font-size: 36rpx;
			font-weight: 800;
			color: #FFFFFF;
			text-shadow: 0px 4rpx 0px #4C9F24;

			&.start1 {
				background-image: url('../../static/yuyuebtn.png');
				text-shadow: 0px 4rpx 0px #C58800;
			}

			text {
				display: block;

				&:nth-child(2) {
					font-size: 20rpx;
					font-weight: 500;
					color: #000;
					text-shadow: none;
					padding-top: 10rpx;
				}
			}
		}
	}
</style>